<template>
  <div class="mixBase">
    <div class="header">
      <div class="logo-icon float-left text-center">
        <!-- <img src="img/toplogo.png" /> -->
        教育管理平台
      </div>
      <div class="float-right header-right">
        <div class=" clear-both"> 
          <!-- 用户名 -->
          <div class="user-name-box float-left toprigh-btn">
            <div class="clear-both">
              <span class="float-left">
                <i class="el-icon-s-custom"></i>
              </span>
              <span class="float-left name">你好，{{userInfo.account}}（{{userInfo.nickname}}）</span>
            </div>
          </div>
          <!-- 设置 -->
          <div class="float-left">
            <el-dropdown :hide-on-click="false">
              <span class="el-dropdown-link ">
                <i class="el-icon-setting setIcon"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <!--<el-dropdown-item  @click.native="jumpLink('accountSetting')">修改密码</el-dropdown-item>-->
                <el-dropdown-item @click.native="jumpLogin('Login')">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div> 
    <div class="mixBase-content"
         :class="{'content-active':isCollapse}">
      <!--nav-->
      <div class="nav-list float-left"
           :style="{'width:200px':isCollapse}">
        <div class="open-nav text-right"
             @click="isCollapse=!isCollapse">
          <span class="el-icon-arrow-left menu-icon"
                :class="{'el-icon-arrow-right':!isCollapse}"></span>
        </div>
        <el-menu default-active="0"
                 class="el-menu-vertical-demo"
                 @open="handleOpen"
                 @close="handleClose"
                 :collapse="isCollapse"
                 :unique-opened="true"
                 background-color="#545c64"
                 text-color="#fff"
                 active-text-color="#ffd04b">

          <!-- <el-menu-item index="0">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item> -->
            <el-submenu index="1">
                <template slot="title">
                <i class="el-icon-s-shop menu-icon"></i>
                <span>课程管理</span>
                </template>
                <el-menu-item index="1-1"
                                @click="jumpLink('courseList')">课程列表</el-menu-item>
                <el-menu-item index="1-2"
                            @click="jumpLink('courseSection')">课程订阅列表</el-menu-item> 
            </el-submenu> 
            
          <!-- <template v-for="(oneItem,oneIndex) in userInfo.permissions"> 
            <el-menu-item :index="(oneIndex+1).toString()"
                          v-if="!oneItem.children">
              <i class="menu-icon"
                 :class="oneItem.icon"></i>
              <span>{{oneItem.name}}</span>
            </el-menu-item> 
            <el-submenu :index="(oneIndex+1).toString()">
              <template slot="title"
                        v-if="oneItem.children">
                <i class="menu-icon"
                   :class="oneItem.icon"></i>
                <span>{{oneItem.name}}</span>
              </template>
              <template v-for="(twoItem,twoIndex) in oneItem.children"> 
                <el-menu-item-group v-if="!twoItem.children">
                  <el-menu-item :index="(oneIndex+1).toString()+'-'+(twoIndex+1).toString()"
                                @click="jumpLink(twoItem.url)">
                    <span>{{twoItem.name}}</span>
                  </el-menu-item>
                </el-menu-item-group> 
                <el-submenu v-if="twoItem.children"
                            :index="(oneIndex+1).toString()+'-'+(twoIndex+1).toString()">
                  <template slot="title">
                    <span>{{twoItem.name}}</span>
                  </template>
                  <template v-for="(threeItem,threeIndex) in twoItem.children"> 
                    <el-menu-item v-if="!threeItem.children"
                                  :index="(oneIndex+1).toString()+'-'+(twoIndex+1).toString()+'-'+(threeIndex+1).toString()"
                                  @click="jumpLink(threeItem.url)">
                      <span>{{threeItem.name}}</span>
                    </el-menu-item> 
                    <el-submenu v-if="threeItem.children"
                                :index="(oneIndex+1).toString()+'-'+(twoIndex+1).toString()+'-'+(threeIndex+1).toString()">
                      <template slot="title">
                        <span>{{threeItem.name}}</span>
                      </template>
                      <el-menu-item v-for="(fourItem,fourIndex) in threeItem.children"
                                    :index="(oneIndex+1).toString()+'-'+(twoIndex+1).toString()+'-'+(threeIndex+1).toString()+'-'+(fourIndex+1).toString()"
                                    @click="jumpLink(fourItem.url)">
                        <span>{{fourItem.name}}</span>
                      </el-menu-item>
                    </el-submenu>
                  </template>

                </el-submenu>
              </template>

            </el-submenu>
          </template>  -->

        </el-menu>
      </div>

      <div class="content-main">
        <router-view v-if="isRouterAlive" />
      </div>
    </div>

    
  </div>
</template>
<script>
import * as api from "./../../api/api"; 
export default {
  name: "mixBase",
  data () {
    return {
      isRouterAlive: true,
      isCollapse: false,
      showMenuList: [],
      userInfo: JSON.parse(sessionStorage.getItem('userInfo')), 
    };
  },
  created () {
    // this.showMenuList=sessionStorage.getItem('models').split(',');  
  
  },
  mounted () {
    let vm = this;
     
  },
  methods: { 
    handleOpen (key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose (key, keyPath) {
      // console.log(key, keyPath);
    },
    //跳转 
    jumpLink (val) {
      this.$router.push({ name: val });
    },
    jumpLogin (val) {
      sessionStorage.setItem("h_token", "");
      sessionStorage.setItem("userInfo", "");
      this.$router.push({ name: val });
    },
  }
};
</script>
<style scoped lang="scss">
.mixBase {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding-top: 50px;
  box-sizing: border-box;
  .mixBase-content {
    width: 100%;
    height: 100%;
    padding: 0 0 0 200px;
    transition: padding 0.5s;
    -moz-transition: padding 0.5s; /* Firefox 4 */
    -webkit-transition: padding 0.5s; /* Safari 和 Chrome */
    -o-transition: padding 0.5s; /* Opera */
    box-sizing: border-box;
  }
  .content-active {
    padding: 0 0 0 65px;
    transition: padding 0.5s;
    -moz-transition: padding 0.5s; /* Firefox 4 */
    -webkit-transition: padding 0.5s; /* Safari 和 Chrome */
    -o-transition: padding 0.5s; /* Opera */
  }
  .header {
    height: 50px;
    width: 100%;
    position: fixed;
    top: 0;
    background: #434a50;
    color: #fff;
    div {
      display: inline-block;
    }
    .logo-icon {
      height: 50px;
      width: 200px;
      line-height: 50px;

      box-sizing: border-box;
      background-color: #434a50;
      img {
        height: 100%;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 6px;
      }
    }
    .header-right {
      margin-right: 2%;
      .toprigh-btn {
        height: 50px;
        padding: 0 20px;
        &:hover {
          background: #545c64;
        }
      }
      .toprigh-text {
        line-height: 50px;
      }
      .user-name-box {
        height: 50px;
        margin-right: 10px;
        padding: 0 20px;
        cursor: pointer;
        .el-icon-s-custom {
          font-size: 30px;
          margin-top: 10px;
        }
        .name {
          line-height: 50px;
          margin-left: 10px;
          color: #ffd04b;
        }
      }
    }
    .sos-msg-box {
      font-size: 16px;
      cursor: pointer;
      .msg-icon {
        font-size: 16px;
      }
      span {
        // color: #f56c6c;
        margin-left: 6px;
      }
    }
  }
  .tabs {
    padding-left: 2%;
  }
  .el-tabs__item {
    font-size: 20px;
  }
  .el-dropdown-link {
    display: inline-block;
    cursor: pointer;
    color: #fff;
    margin-top: 10px;
  }
  .el-dropdown {
    height: 50px;
  }
  .el-icon-arrow-down {
    font-size: 30px;
  }
  .setIcon {
    font-size: 30px;
  }
  .nav-list {
    height: 100%;
    overflow: auto;
    position: fixed;
    left: 0;
    z-index: 10;
    background: #545c64;
    border-right: solid 1px #545c64;
    .menu-icon {
      color: #fff;
      margin-right: 5px;
      font-size: 18px;
    }
    .open-nav {
      width: 100%;
      box-sizing: border-box;
      padding: 14px 20px;
      cursor: pointer;
      background-color: #545c64;
      color: #fff;
      &:hover {
        background: #434a50;
      }
    }
    .el-menu {
      border-right: solid 1px #545c64;
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 200px;
    }
    .iconfont {
      font-size: 16px;
      font-weight: bold;
      margin-right: 10px;
    }
    .nav-menu-open {
      width: 200px;
    }
  }
  .nav-list::-webkit-scrollbar {
    width: 2px;
    height: 6px;
    background-color: #f5f5f5;
  }
  .nav-list::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #f5f5f5;
  }
  .nav-list::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #555;
  }
  .content-main {
    width: 100%;
    height: 100%;
    overflow: auto;
  }
} 
</style>
